<template>
    <div style='font-size:0;'>
        <template v-if='d'>
            <ul class='_num-group'>
                <li class='_item' v-for='(item, index) in day' :key='index'>
                    <span class='_wrap'>{{item}}</span>
                </li>
            </ul>
            <div class='_text'>
                <span class='_wrap'>天</span>
            </div>
        </template>
        <template v-if='h'>
            <ul class='_num-group'>
                <li class='_item' v-for='(item, index) in hour' :key='index'>
                    <span class='_wrap'>{{item}}</span>
                </li>
            </ul>
            <div class='_text two'>
                <span class='_wrap'>小时</span>
            </div>
        </template>
        <template v-if='m'>
            <ul class='_num-group'>
                <li class='_item' v-for='(item, index) in minute' :key='index'>
                    <span class='_wrap'>{{item}}</span>
                </li>
            </ul>
            <div class='_text two'>
                <span class='_wrap'>分钟</span>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name : 'datetime-count',
    props : {
        d : {
            type : Boolean,
            default : false
        },

        h : {
            type : Boolean,
            default : false
        },

        m : {
            type : Boolean,
            default : false
        },

        value : {
            type : Number,
            default : 0
        }
    },

    computed : {
        day () {
            var day = Math.floor(this.value / (3600 * 24)) + ''
            try {
                return day.padStart(4, '0')
            } catch (error) {
                return day
            }
        },

        hour () {
            var value = this.value
            var day = Math.floor(value / (3600 * 24))
            var hour = Math.floor((value - day * 3600 * 24) / 3600)
            if(hour < 10) {
                hour = '0' + hour
            }
            return hour + ''
        },

        minute () {
            var value = this.value
            var day = Math.floor(value / (3600 * 24))
            var hour = Math.floor((value - day * 3600 * 24) / 3600)
            var minute = Math.floor((value - day * 3600 * 24 - hour * 3600) / 60)

            if(minute < 10) {
                minute = '0' + minute
            }


            return minute + ''
        }
    }
}
</script>

<style scoped lang='scss'>
    $h : 55px;
    ._num-group{
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin:0;
        padding:0;
        list-style:none;
        font-size: 0;
        padding : 5px;
        height: $h;
        overflow: hidden;
        ._item{
            float: left;;
            width: 30px;
            position: relative;
            margin-left: 2px;
            height: 100%;
            &:first-child{
                margin-left: 0;
            }

            

            &::before, &::after{
                content : '';
                background : #243351;
                position: absolute;
                width: 100%;
                height: $h / 2 - 6px;
                border-radius: 3px;
                left: 0;
            }

            &::before{
                top : 0;
            }
            &::after{
                bottom : 0;
            }

            ._wrap{
                font-size: 36px;
                color: #fff;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }
        }

        &:before{
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid transparent;
            border-color: #6e9cfe transparent transparent #6e9cfe;
            position: absolute;
            left: 0;
            top: 0;
        }

        &:after{
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid transparent;
            border-color:transparent #6e9cfe #6e9cfe transparent;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    ._text{
        display: inline-block;
        vertical-align: top;
        height: $h;
        position: relative;
        margin: 0px 18px;
        font-size: 20px;
        color: #6e9cfe;
        width: 21px;
        white-space: nowrap;
        &.two{
            width: 42px;
        }

        ._wrap{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom:2px;
        }
    }
</style>